<template>
  <div class="infinite-viewport">
    <div class="content" :style="contentStyle">
      <!-- 在这里添加你的页面区域内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      translateX: 0,
      translateY: 0
    };
  },
  computed: {
    contentStyle() {
      return {
        transform: `scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`
      };
    }
  },
  methods: {
    zoom(event) {
      event.preventDefault();
      const zoomSpeed = 0.1;
      const oldScale = this.scale;
      if (event.deltaY < 0) {
        // 放大
        this.scale = Math.min(3, this.scale + zoomSpeed);
      } else {
        // 缩小
        this.scale = Math.max(0.2, this.scale - zoomSpeed);
      }

      // 计算最大可偏移量，防止超出左上方边界
      const maxTranslateX = 0;
      const maxTranslateY = 0;

      // 调整translateX和translateY以保持内容不超出左上方边界
      this.translateX = Math.min(maxTranslateX, Math.max(this.translateX, -maxTranslateX));
      this.translateY = Math.min(maxTranslateY, Math.max(this.translateY, -maxTranslateY));
    }
  }
};
</script>

<style scoped>
.infinite-viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  position: relative;
}

.content {
  position: absolute;
  transform-origin: top left;
  user-drag: none;
  user-select: none;
}
</style>
